<template>
  <div>
    {{model}}
    <vanForm style="padding:15px;" @submit="saveRecord">
      <template v-for="(item,index) in recordValue">
        <Row type="flex" style="display: flex;align-items: center">
          <Col span="6" v-if="['many2many','one2many'].indexOf(item.type)<0"> {{ item.string }}</Col>
          <Col :span="['many2many','one2many'].indexOf(item.type)<0?18:24">
            {{item}}
            <Field :model="model" :id="id" style="padding: 10px;text-align: center;alignment: right"
                   :key="index"
                   :field="item"
                   :value="item"
                   :edit="true"
                   :title="true" :context="context" :saveFast="false"
            />
          </Col>
        </Row>
      </template>
      <div style="margin: 16px;">
        <Button round block type="info" native-type="submit">
          提交
        </Button>
        <Button round block type="warning" @click="onCancel" native-type="button">
          取消
        </Button>
      </div>
    </vanForm>
    <div style="font-size: 6px">PageNewForm</div>
  </div>
</template>

<script>

  import gql from 'graphql-tag'
  import {Button, Col, Form, Popup, Row} from "vant"

  export default {
    name: 'PageNewForm',
    components: {
      vanForm: Form, Row, Col, Popup, Button
    },
    data: function () {
      return {
        context: {},
        recordValue: [],
        id: null,
        model: '', old_path: {}, emit_name: ''
      }
    },
    computed: {
      change() {
        if (this.recordValue) {
          for (let fieldName of this.recordValue) {
            let field = Object.values(fieldName)[0]
            if (field.change) {
              return true
            }
          }
        }
        return false
      },

    },
    watch: {
      defaultValue(to, from) {
        this.recordValue = to
        for (let item in to) {
          this.recordValue[item]['cval'] = to[item].value
        }
      },
      $route(to, from) {
        if (to.name === 'pagenewform' && to.name !== from.name) {
          this.model = this.$route.query.model
          this.old_path = from
        }
      }
    },
    mounted: function () {
      this.model = this.$route.query.model
      this.emit_name = this.$route.query.emit_name
    },
    apollo: {
      defaultValue: {
        query: gql`query qdv($model:String!){
          defaultValue:allDefaultValue(model:$model)
         }`,
        variables() {
          return {
            model: this.model
          }
        },
        skip() {
          return !(this.model)
        }
      }
    },
    methods: {
      writeDict: function () {
        let v = {}
        for (let field of this.recordValue) {
          if (field.change) {
            v[field.name] = field.newval
          }
        }
        return v
      },
      saveRecord: function (close) {
        let self = this
        let writeDict = this.writeDict(this.recordValue)
        this.$apollo.mutate({
          mutation: gql`mutation($model:String!,$value:JSON!){
  createRecord(model:$model,value:$value){
    ok
  }
}`,
          variables: {model: this.model, value: writeDict}
        })
          .then(function (response) {
            if (response && response.data.createRecord.ok) {
              if (self.emit_name) self.$EventBus.$emit(self.emit_name)
              self.onCancel()
            } else if (response && !response.data.createRecord.ok) {
              // self.app_root.toast(response.result.errMsg)
            }
          })
          .catch(function (error) {
            console.log(error, __filename)
          })
      },

      onCancel() {
        console.info(this.old_path)
        if (this.old_path.name)
          this.$router.replace(this.old_path)
        else
          this.$router.back()

      }
    }

  }
</script>
